<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
  <meta name="author" content="火星科技 http://mars3d.cn " />
  <meta name="apple-touch-fullscreen" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="x5-fullscreen" content="true" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <!-- 标题及搜索关键字 -->
  <meta name="keywords" content="火星科技,cesium,3D,GIS,marsgis,三维,地球,地图,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
  <meta name="description"
        content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 cesium cesium开发 cesium框架 三维 地球 模型  gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包  地图离线 二维地图 三维地图 全景漫游 地理信息系统 云GIS 三维GIS GIS平台 WebGIS" />

  <link rel="shortcut icon" type="image/x-icon" href="http://mars3d.cn/favicon.ico" />
  <title>三维地图 | Mars3D | 三维地图 | 火星科技 | 合肥火星科技有限公司</title>

  <!--第三方lib-->
  <script type="text/javascript" src="../lib/include-lib.js" libpath="../lib/"
  include="jquery,font-awesome,bootstrap,bootstrap-table,layer,haoutil,turf,mars3d"></script>

  <link href="css/style.css" rel="stylesheet" />
  <style>
    .fixed-table-container tbody .selected td {
        background-color: #3f4854a9;
    }
  </style>
</head>

<body class="dark">
  <!--加载前进行操作提示，优化用户体验-->
  <div id="mask" class="signmask" onclick="removeMask()"></div>

  <div id="mars3dContainer" class="mars3d-container"></div>

  <!-- 面板 -->
  <div id="logView" class="infoview infoview-right"></div>

  <!-- 车辆列表 -->
  <div  class="infoview">
    <table id="table">

    </table>
  </div>


  <script src="./js/common.js"></script>

  <script type="text/javascript">
    'use script' //开发环境建议开启严格模式

    var map
    var graphicLayer

    function initMap(options) {
      //合并属性参数，可覆盖config.json中的对应配置
      var mapOptions = mars3d.Util.merge(options, {
        scene: {
          center: {
            y: 31.773622,
            x: 117.077444,
            z: 5441.49,
            heading: 359.2,
            pitch: -57.2,
            roll: 0,
          },
        },
      })

      //创建三维地球场景
      map = new mars3d.Map('mars3dContainer', mapOptions)

      //演示数据的时间
      map.clock.currentTime = window.Cesium.JulianDate.fromDate(new Date('2020-11-25 10:10:00'))

      //加载车辆
      $.ajax({
        type: 'GET',
        url: '//data.mars3d.cn/file/apidemo/car-list.json',
        dataType: 'json',
        success: function (res) {
          showCarList(res.data)
        },
        error: function (err) {
          haoutil.msg('实时查询气象信息失败，请稍候再试')
        },
      })
    }

    var colors = [
      'rgb(40, 40, 255)',
      'rgb(0, 88, 176)',
      'rgb(0, 128, 255)',
      'rgb(0, 217, 0)',
      'rgb(0, 151, 0)',
      'rgb(255, 199, 83)',
      'rgb(255, 144, 30)',
      'rgb(202, 101, 0)',
      'rgb(255, 0, 0)',
    ]

    function showCarList(arr) {
      console.log('加载' + arr.length + '条')

      //创建矢量数据图层
      graphicLayer = new mars3d.layer.GraphicLayer()
      map.addLayer(graphicLayer)

      // 鼠标移入提示信息
      graphicLayer.bindTooltip(function (event) {
        var data = event.graphic.options
        return '车辆编号：' + data.id + '<br />车牌号码：' + data.name
      })

      //单击地图空白处
      map.on(mars3d.EventType.clickMap, function (event) {
        if (lastClickCar) {
          lastClickCar.removeShading('circle')
          lastClickCar = null
        }
      })

      // 绑定点击事件
      graphicLayer.on(mars3d.EventType.click, (event, position) => {
        var car = event.graphic
        console.log('单击了车辆', car)

        if (lastClickCar) {
          if (lastClickCar === car) {
            return
          } //重复单击，跳出
          lastClickCar.removeShading('circle')
          lastClickCar = null
        }

        car.addShading({
          type: 'circle',
          materialType: mars3d.MaterialType.CircleWave,
          speed: 10,
          count: 3,
          gradient: 0.1,
          radius: 50,
          color: '#ffff00',
          opacity: 0.3,
          show: true,
        })
        lastClickCar = car

        //视角定位下
        // car.flyToPoint({ radius: 1000 })
      })

      var lastClickCar

      for (var i = 0, len = arr.length; i < len; i++) {
        var item = arr[i]

        item.show = true

        var modelParam
        switch (item.type) {
          default:
          case 1:
            modelParam = {
              scale: 2,
              url: '//data.mars3d.cn/gltf/mars/car/tufangche.glb',
            }
            break
          case 2:
            modelParam = {
              scale: 1,
              url: '//data.mars3d.cn/gltf/mars/car/wajueji.glb',
            }
            break
        }

        const car = new mars3d.graphic.DynamicRoamLine({
          id: item.id,
          name: item.name,
          model: {
            clampToGround: true,
            show: true,
            ...modelParam,
          },
          shadow: [
            {
              type: 'polyline',
              color: colors[i],
              width: 2,
              clampToGround: true,
              maxDistance: 500,
              show: true,
            },
          ],
        })
        graphicLayer.addGraphic(car)
      }

      tabInit(arr)

      // 定时获取卡车和铲车的列表数据
      this.createPath()
    }

    //取轨迹数据的时间间隔（单位：秒）
    var timeStep = 10

    //首次获取并创建轨迹
    function createPath() {
      //取数据的时间范围，结束时间
      var date = Cesium.JulianDate.toDate(map.clock.currentTime)
      var endTime = date.format('yyyy-MM-dd HH:mm:ss')

      // 修改当前时间回退一分钟，因为数据永远是当前时间之前的。
      date.setSeconds(date.getSeconds() - 60)
      map.clock.currentTime = window.Cesium.JulianDate.fromDate(date)

      //取数据的时间范围，开始时间
      date.setMinutes(date.getMinutes() - 10) // 初次取一定时间内的数据
      var beginTime = date.format('yyyy-MM-dd HH:mm:ss')

      //记录最后一次读取数据的时间
      this.lastTime = endTime

      //取数据
      getPathList(beginTime, endTime)

      //定时更新
      this.intervalGetData = setInterval(() => {
        this.updatePath()
      }, timeStep * 1000)
    }

    //后续更新轨迹
    function updatePath() {
      var beginTime = this.lastTime

      var date = new Date(beginTime)
      date.setSeconds(date.getSeconds() + timeStep)
      var endTime = date.format('yyyy-MM-dd HH:mm:ss')

      this.lastTime = endTime

      //取数据
      getPathList(beginTime, endTime)
    }

    //读取车辆gps坐标路径的接口
    function getPathList(beginTime, endTime) {
      $.ajax({
        type: 'GET',
        url: '//data.mars3d.cn/file/apidemo/car-path.json',
        dataType: 'json',
        // data: {
        //     beginTime: beginTime,
        //     endTime: endTime,
        //     timeStamp: Date.now(),
        // },
        success: function (res) {
          var listALL = res.data || []

          //因为读取静态json，为了演示动态，筛选数据内符合时间范围内的数据。
          //真实接口中可以注释下面代码。
          var d_beginTime = new Date(beginTime)
          var d_endTime = new Date(endTime)
          var list = listALL.filter((item) => {
            var thistime = new Date(item.time)
            return thistime >= d_beginTime && thistime <= d_endTime
          })
          //真实接口中可以注释上面代码。

          addLog(`${endTime} 获取到 ${list.length} 条GPS坐标记录`)

          //循环车辆
          graphicLayer.eachGraphic((car) => {
            //取出对应车辆的轨迹列表
            var path = list.filter((item) => {
              return item.id === car.id
            })

            if (path && path.length > 0) {
              //更新车辆的轨迹
              car.updatePath(path, {
                timeColumn: 'time',
                getPosition: function (item) {
                  return Cesium.Cartesian3.fromDegrees(parseFloat(item.lon), parseFloat(item.lat), 0)
                },
              })
              //addLog(`${car.id} 更新 ${path.length} 条轨迹记录`)
            }
          })
        },
        error: function (err) {
          haoutil.msg('实时查询气象信息失败，请稍候再试')
        },
      })
    }

    function addLog(log) {
      console.log(log)

      var logView = $('#logView')
      var oldhtml = logView.html()
      if (oldhtml.length < 500) {
        logView.html(oldhtml + log + '<br />')
      } else {
        logView.html(log + '<br />')
      }
    }

    //==================================================
    function tabInit(data) {
      $('#table').bootstrapTable({
        pagination: false,
        singleSelect: true,
        data: data,
        checkboxHeader: true,
        columns: [
          {
            title: '是否显示',
            field: 'show',
            align: 'center',
            checkbox: true,
            width: 50,
          },
          {
            title: '序号',
            sortable: true,
            editable: false,
            align: 'left',
            formatter: function (value, row, index) {
              return index + 1
            },
          },
          {
            field: 'name',
            title: '车牌号',
          },
          {
            field: 'type',
            title: '类型',
            formatter: function (value, row, index) {
              if (value == 1) {
                return '土方车'
              } else if (value == 2) {
                return '挖掘机'
              }
              return ''
            },
          },
        ],
        //定位车辆区域
        onClickRow: function (row) {
          let car = graphicLayer.getGraphicById(row.id)
          if (car) {
            car.flyToPoint({ radius: 900 })
          }
        },
        //勾选隐藏车辆
        onCheck: function (row) {
          let car = graphicLayer.getGraphicById(row.id)
          if (car) {
            car.show = true
          }
        },
        //取消勾选显示车辆
        onUncheck: function (row) {
          let car = graphicLayer.getGraphicById(row.id)
          if (car) {
            car.show = false
          }
        },
      })
}
  </script>
</body>

</html>
